<template>
	<!--企业认证基本信息-->
	<view class="">
		<view class="flex padding-left-sm padding-right-xs padding-top padding-bottom">
			<view class="flex-sub" @click="BackPage">
				<text class="cuIcon-back" style="font-size: 44rpx;"></text>
			</view>
			<view class="flex-treble text-center basic-title">机构/团体认证信息</view>
			<view class="flex-sub"></view>
		</view>
		<view class="content">
			<view class="progress1">
				<view class="progress-circle-1">
					<image class="ciecle-icon" src="../..https://txr001.zthj.net/static/img/green-circle.png" mode=""></image>
					<!-- <image class="right-icon" src="../..https://txr001.zthj.net/static/img/right.png" mode=""></image> -->
					<text class="progress-text">认证信息</text>
				</view>
				<view class="progress-line" style="background-color: #F6F6F6;"></view>
				<view class="progress-circle-gray">
					<text class="progress-circle-number">2</text>
					<text class="progress-text">附件上传</text>
				</view>
			</view>
			<view class="flex justify-start align-center">
				<view class="basic-content-left"></view>
				<view class="basic-content-title">机构/团体认证信息（必填）</view>
			</view>
			<form @submit="toNext">
			<view class="basic-qy-name">机构/团体名称：</view>
			<input class="basic-qy-input" placeholder="请输入机构/团体名称" :disabled="id!=0" v-model="company_name" name="input"></input>

			<view class="basic-qy-name padding-top-48">法人姓名：</view>
			<input class="basic-qy-input" placeholder="请输入法人姓名" v-model="leader" name="input"></input>

			<view class="basic-qy-name padding-top-48">法人联系地址：</view>
			<input class="basic-qy-input" placeholder="请输入地址" v-model="address" name="input"></input>

			<view class="basic-qy-name padding-top-48">法人身份证明类型：</view>
			<radio-group class="block " @change="idchange">
				<view class="padding-top-lg padding-bottom">
					<view class="flex align-start">
						<view class="flex-sub flex align-center justify-start">
							<radio value="1" :checked="id_type==1" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two">身份证</text>
						</view>
						<view class="flex-sub flex align-start justify-start">
							<radio value="2" :checked="id_type==2" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">港澳居民来往内地通行证</text>
						</view>
					</view>
					<view class="flex padding-top-40">
						<view class="flex-sub flex align-start justify-start">
							<radio value="3" :checked="id_type==3" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">台湾居民来往大陆通行证</text>
						</view>
						<view class="flex-sub flex align-start justify-start">
							<radio value="4" :checked="id_type==4" style="transform:scale(0.8)"></radio>
							<text class="basic-radio-title-two margin-top-6">护照或外国人永久居留证</text>
						</view>
					</view>
				</view>
			</radio-group>

			<view class="basic-qy-name padding-top-80">证件号码：</view>
			<input class="basic-qy-input" placeholder="请输入证件号码" v-model="idnumber" name="input"></input>

			<view class="basic-qy-name padding-top-48">认证地区：</view>
			<view class="cu-form-group">
				<picker mode="selector" @change="bindPickerChange" :value="index"  :range="list">
					<view class="picker">
						{{list[index]}}
					</view>
				</picker>
			</view>
			<view class="padding flex flex-wrap justify-center align-center">
				<button class="cu-btn round submit-btn" form-type="submit">下一步</button>
			</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['中国大陆'],
				index: 0,
				radio: 1,
				company_name: '',
				leader: '',
				address: '',
				id_type: 1,
				idnumber: '',
				region: '',
				id: 0
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
				this.getInfo(e.id);
			} else {
				this.region = this.list[this.index];
			}
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
				this.region = this.list[e.detail.value];
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			toNext() {
				if (!this.company_name) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none'
					})
					return
				}
				if (!this.leader) {
					uni.showToast({
						title: '请输入法人代表姓名',
						icon: 'none'
					})
					return
				}
				if (!this.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})
					return
				}
				if (!this.idnumber) {
					uni.showToast({
						title: '请输入证件号码',
						icon: 'none'
					})
					return
				}
				let url = 'https://qd.zthj.net/api/userinfo/qiyerenzheng';
				if (this.id!=0){
					url = 'https://qd.zthj.net/api/userinfo/updateRZ';
				}
					uni.request({
						url: url,
					data: {
						user_id: uni.getStorageSync('user_id'),
						company_name: this.company_name,
						leader: this.leader,
						address: this.address,
						id_type: this.id_type,
						idnumber: this.idnumber,
						region: this.region,
						ctype: 2,
						id:this.id
					},
					method: "POST",
					success: (res) => {
						// console.log(res.data);
						if (res.data.code == 1) {
							if(this.id==0){
								this.id=res.data.data.renzheng_id;
							}
							uni.navigateTo({
								url: "/pages/groups/fileUpload?id=" + this.id
							});
						} else {
							uni.showToast({
								title: '提交失败！',
								icon: 'none'
							})
						}
					}
				});
			},
			getInfo: function(id) {
				let that = this;
				uni.request({
					url: 'https://qd.zthj.net/api/userinfo/rzDetail', //仅为示例，并非真实接口地址。
					data: {
						id: id
					},
					success: (res) => {
						// console.log(res.data);
						if (res.data.length > 0) {
							that.company_name = res.data[0].company_name;
							that.leader = res.data[0].leader;
							that.address = res.data[0].address;
							that.id_type = res.data[0].id_type;
							that.idnumber = res.data[0].idnumber;
							that.region = res.data[0].region;
							that.index = that.list.indexOf(that.region);
						}
					}
				});
			}


		}
	}
</script>

<style scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		z-index: 999;
	}

	page {
		background-color: #FFFFFF;
	}

	.basic-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #26292C;
	}

	.basic-title-img {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.basic-content-left {
		width: 8rpx;
		height: 32rpx;
		background: #2E99BB;
		border-radius: 8px 8px 8px 8px;
	}

	.basic-content-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2E99BB;
		padding-left: 12rpx;
	}

	.basic-qy-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #222222;
		padding-top: 32rpx;
	}

	.basic-qy-input {
		height: 80rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #D0D0D0;
		margin-top: 12rpx;
		font-size: 28rpx;
		font-weight: 400;
		padding-left: 24rpx;
		color: black;
	}

	.basic-radio-title {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
		padding-left: 20rpx;
		vertical-align: middle;
		width: 224rpx;
		display: block;
	}

	.basic-radio-title-two {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
		padding-left: 20rpx;
		vertical-align: middle;
	}

	.padding-top-40 {
		padding-top: 40rpx;
	}

	.content {
		padding: 48rpx 32rpx 148rpx 32rpx;
	}

	.submit-btn {
		margin-top: 80rpx;
		width: 360rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #24458E;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		color: white;
	}

	.cu-form-group {
		margin-top: 12rpx;
		background-color: #FFFFFF !important;
		padding: 0 30rpx 0 0;
		display: flex;
		align-items: center;
		min-height: 80rpx !important;
		justify-content: space-between;
		height: 80rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #D0D0D0;
	}

	.cu-form-group uni-picker .picker {
		text-align: left;
		padding-left: 24rpx;
	}
</style>